<template>
  <div>
    <el-row class="tigan">
      <el-col :span="1" class="center">题干:</el-col>
      <el-col :span="20" class="tiganIpt">
        <TinymceEditor
          ref="editor"
          :focus="true"
          v-model="modelValue.subjectEditorValue"
          :height="200"
        />
      </el-col>
    </el-row>
    <el-divider />
    <!-- <el-row class="hoverOptions" v-for="(item,i) in modelValue.options" :key="item.optionUuid">
      <el-col :span="6" class="center">
        {{i+1}}:
        <span>
          百分比:
          <el-input v-model="item.optionPercentValue" style="width:50px"></el-input>%
        </span>
      </el-col>
      <el-col :span="10">
        <TinymceEditor v-model="item.optionTextValue" :height="50" />
      </el-col>
      <el-col class="center showOp" :span="2">
        <el-tooltip effect="light" content="等效答案" placement="top-start">
          <el-icon style="color:#409EFF;cursor: pointer;" @click="equivalentBack(item)">
            <Paperclip />
          </el-icon>
        </el-tooltip>
      </el-col>
      <el-col class="center showOp" :span="2">
        <el-tooltip effect="light" content="选项反馈" placement="top-start">
          <el-icon style="color:#409EFF;cursor: pointer;" @click="feedback(i)">
            <Position />
          </el-icon>
        </el-tooltip>
      </el-col>
      <el-col class="center showOp" :span="2">
        <el-tooltip effect="light" content="删除" placement="top-start">
          <el-icon style="color:#409EFF;cursor: pointer;" @click="danxuanClearOpt(i)">
            <Delete />
          </el-icon>
        </el-tooltip>
      </el-col>
      <el-col v-for="(k,j) in item.equalAnswers" :key="j" :span="11" :offset="5" class="dengxiao">
        <p style="font-size:14px;width:20%">等效答案:</p>
        <TinymceEditor
          style="width:90%"
          ref="editor"
          v-model="k.equalAnswerEditorValue"
          :height="50"
        />
      </el-col>
      <el-col v-if="item.optionTipEditorShow">
        <el-row>
          <el-col :span="3" :offset="2" class="center">选项反馈</el-col>
          <el-col :span="10">
            <TinymceEditor v-model="item.optionTipEditorValue" :height="50" />
          </el-col>
        </el-row>
      </el-col>
    </el-row> -->
    <el-row v-if="modelValue.explainEditorShow">
      <el-col :span="2" class="center">试题解析:</el-col>
      <el-col :span="19">
        <TinymceEditor ref="editor" v-model="modelValue.explainEditorValue" :height="80" />
      </el-col>
    </el-row>
    <el-divider />

    <el-row style="padding-top:6px">
      <el-col :span="4">
        <el-button type="success" plain :icon="Plus" @click="addAnalysis">添加试题解析</el-button>
      </el-col>
    </el-row>
    <el-row style="padding-top:6px">
    <CanvasDemo v-model="modelValue.maodianObject"></CanvasDemo>
    </el-row>
  </div>
</template>

<script src=""></script>
<script setup>
import {
  Plus,
} from "@element-plus/icons-vue";
import { getCurrentInstance, toRefs, ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import { uuid } from 'vue3-uuid'
import TinymceEditor from '../component/Editor/index.vue'
import CanvasDemo from './canvasDemo.vue';
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: [String, Object, Array],
    default: null,
  },
})
const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
const addAnalysis = () => {
  //添加试题解析
  props.modelValue.explainEditorShow = !props.modelValue.explainEditorShow
  props.modelValue.explainEditorValue = ''
}
const feedback = (val) => {
  //选项反馈
  props.modelValue.options[val].optionTipEditorShow =
    !props.modelValue.options[val].optionTipEditorShow
}
const danxuanClearOpt = (i) => {
  props.modelValue.options.splice(i, 1)
  sortIndex()
}
const sortIndex = () => {
  //选项重新排序
  props.modelValue.options.forEach((item, i) => {
    item.optionIndex = i + 1
  })
}
const equivalentBack = (i) => {
  //等效答案
  i.equalAnswers.push({
    equalAnswerEditorValue: '',
  })
}
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    emit('update:modelValue', newVal)
  },
  { deep: true }
)
</script>

<style scoped>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.center2 {
  display: flex;
  align-items: center;
}
.showOp {
  opacity: 0;
  transition: all 0.5s;
}
.hoverOptions:hover .showOp {
  opacity: 1;
}
.el-divider--horizontal {
  border-top: 1px solid #a0cfff !important;
}
</style>